<template>
  <pc-nav></pc-nav>

    <!-- 空登陆页 -->
    <view class=" main ss-flex ss-row-center">
        <div class="left ss-row-center">
          <image
            class="ss-flex-1 ss-flex"
            style="width: 490px; height: 500px;"
            mode="aspectfill"
            src="/static/images/login-bg-s.png">
          </image>
        </div>

      <div class="right ss-row-right">
        <div class="login-box-user" :class="state.loginType.wechatLogin?'ss-hide':'ss-block'">
          <div class="login-box">
            <img
              class="ewm-ico"
              @tap="Logintype('wechatLogin')"
              src="/static/images/shop/login-ewm.png"/>
          </div>
          <div class="ss-flex ss-col-center" style="margin-top: 30px;">
            <a class="ss-flex-1 ss-row-right pass-login" :class="state.loginType.accountLogin?'redfont':''" @tap="Logintype('accountLogin')" style="text-align: right; padding-right: 40px; cursor: pointer;">密码登陆</a>
            <a class="ss-flex-1 ss-row-right sms-login" :class="state.loginType.smsLogin?'redfont':''" @tap="Logintype('smsLogin')" style="text-align: left; padding-left: 40px; cursor: pointer;">短信登陆</a>
          </div>
        <!--账户登录-->
          <view class="ss-flex-1 ss-row-center ss-items-center pass-login-con" :class="state.loginType.accountLogin?'ss-block':'ss-hide'" style="margin-top: 40px;">
            <uni-forms
              ref="accountLoginRef"
              v-model="state.model"
              :rules="state.rules"
              validateTrigger="bind"
              labelWidth="140"
              labelAlign="center"
            >
              <input
                type="text"
                class="uni-input ss-flex user  ss-row-center ss-items-center"
                placeholder="用户名/手机号"
                v-model="state.model.account"
              />
              <input
                type="password"
                class="uni-input ss-flex user ss-row-center ss-items-center"
                style="margin-bottom: 50px; display: block; margin-top: 20px;"
                placeholder="密码"
                v-model="state.model.password"
              />
            <button type="primary" @tap="accountLoginSubmit()" class="ss-rest-button ss-r-14 user ui-Shadow-Main">登录</button>
              <view style="width:75%; margin: 0 auto; justify-content: space-between" class="ss-flex">
                <view style="padding-right: 30px; cursor: pointer;" @tap="gourl('/pages/index/register')">注册用户</view>
                <view style="cursor: pointer;" @tap="gourl('/pages/index/resetpwd')">忘记密码？</view>
              </view>
            </uni-forms>
          </view>
<!-- 验证码登录 -->
          <view class="ss-flex-1 ss-row-center ss-items-center sms-login-con" :class="state.loginType.smsLogin?'ss-block':'ss-hide'" style="margin-top: 40px;">
            <uni-forms
              ref="smsLoginRef"
              v-model="state.model"
              :rules="state.rules"
              validateTrigger="bind"
            >
            <input
              type="number"
              name="mobile"
              class="uni-input ss-flex user  ss-row-center ss-items-center"
              placeholder="用户名/手机号"
              v-model="state.model.mobile"
              :inputBorder="false"
            />
            <div class="ss-flex" style="margin-bottom: 50px; margin-top: 20px;">
              <input type="text" name="code" maxlength="4" v-model="state.model.code" class="uni-input user ss-flex-1 ss-row-center" style="margin-left: 50px; margin-right: 10px;" placeholder="验证码" />
              <button @tap="getsms();getSmsCode('smsLogin', state.model.mobile);" class="sms-btm">获取验证码</button>
            </div>
            <button @tap="smsLoginSubmit()" type="primary" class="ss-rest-button user ss-r-14 ui-Shadow-Main">登录</button>

            </uni-forms>
          </view>
        </div>
<!-- 微信扫码登录 -->
        <div class="login-box-ewm" :class="state.loginType.wechatLogin?'ss-block':'ss-hide'">
          <div class="login-box">
            <img class="input-ico" @tap="Logintype('accountLogin')" src="/static/images/shop/login-user.png"/>
          </div>
          <iframe
            style="width: 100%; height: 400px;"
            id="wechatauth"
            :class="state.loginType.wechatLogin?'ss-block':'ss-hide'"
            :src="state.openWechat"
          >
          </iframe>

        </div>

      </div>
    </view>
  <div class="container-fluid mb-3">
    <pc-footer></pc-footer>
  </div>
</template>

<script setup>
  import { computed, watch, ref, reactive, unref } from 'vue';
  import sheep from '@/sheep';
  import { code, mobile, password } from '@/sheep/validate/form';
  import { showAuthModal, closeAuthModal, getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
  import PcNav from '@/sheep/components/pc-nav/pc-nav.vue';
  import PcFooter from '@/sheep/components/pc-footer/pc-footer.vue';
  import UniForms from '@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue';
  const accountLoginRef = ref(null);
  const emits = defineEmits(['onConfirm']);

  const smsLoginRef = ref(null);
  //const emits = defineEmits(['onConfirm']);
  const props = defineProps({
    agreeStatus: {
      type: Boolean,
      default: false,
    },
  });

  // 数据
  const state = reactive({
    loginType:{
      accountLogin:true,
      smsLogin:false,
      wechatLogin:false,
    },
    openWechat:'',
    isMobileEnd: false, // 手机号输入完毕
    codeText: '获取验证码',
    model: {
      mobile: '', // 手机号
      code: '', // 验证码
      account:'',//账户
      password: '', // 密码
    },
    rules: {
      code,
      mobile,
      password,
    },
  });
/*  console.log(state.loginType.accountLogin);
  console.log(state.loginType.smsLogin);*/
  // 2.短信登录
  async function smsLoginSubmit() {
    const validate = await unref(smsLoginRef)
      .validate()
      .catch((error) => {
        console.log('error: ', error);
      });
    if (!validate) return;

    /*if (!props.agreeStatus) {
      emits('onConfirm', true);
      sheep.$helper.toast('请勾选同意');
      return;
    }*/
    const { code } = await sheep.$api.user.smsLogin(state.model);
    if (code === 1) {
      //closeAuthModal();
      sheep.$router.go("/pages/index/index");
    }
  }

  // 3.账号登录
  async function accountLoginSubmit() {
    // 表单验证
    const validate = await unref(accountLoginRef)
      .validate()
      .catch((error) => {
        console.log('error: ', error);
      });
    if (!validate) return;

    // 同意协议
    /*if (!props.agreeStatus) {
      emits('onConfirm', true);
      sheep.$helper.toast('请勾选同意');
      return;
    }*/

    // 提交数据
    sheep.$api.user.accountLogin(state.model).then((res) => {
      if (res.code === 1) {
        sheep.$store('user').getInfo()
          .then((resinfo) => {
              if(resinfo)
              {
                sheep.$router.go("/pages/index/index")
              }
            }
          );

      }
    });
  }
  function gourl(url){
    //alert("22")
  sheep.$router.go(url);
}
  function getsms(){
    //alert("12121");
    $(".sms-btm").attr("disabled", "disabled");
    let time=60;
    var t = setInterval(function () {
      time--;
      $(".sms-btm").html(time + "s后重新获取");
      if (time == 0) {
        clearInterval(t);
        $(".sms-btm").html("获取验证码");
        $(".sms-btm").removeAttr("disabled");
      }
    }, 1000)
  }

  function Logintype(lgtype){
    state.loginType.accountLogin=false;
    state.loginType.smsLogin=false;
    state.loginType.wechatLogin=false;
    state.openWechat='';
    if(lgtype==undefined || lgtype==null){
      state.loginType.accountLogin=true;
    }
    if(lgtype=="accountLogin"){
      state.loginType.accountLogin=true;
    }
    if(lgtype=="smsLogin"){
      state.loginType.smsLogin=true;
    }
    if(lgtype=="wechatLogin"){
      state.loginType.wechatLogin=true;
      state.openWechat='https://wkadmin.jhpress.com/index.php/third/connect/wechat.html?url='+window.location.href;
    }
  }


</script>


<style scoped>
  html, body{
    height: auto !important;
  }
  .ss-hide{
    display: none !important;
  }
  .ss-block{
    display: block;
  }
  .sms-btm{
    width: 150px; margin-bottom: 12px; margin-right: 50px;
  }
  uni-page-body{
    background-color: #f6f6f6 !important;
  }
  .pass-login, .sms-login{
    font-size: 20px;
    color: #0C1A29;
    font-weight: bold;
    text-decoration: none;
  }
  .redfont{
    color: #0c53bf;
  }

  .main{
    width: 1200px;
    margin: 0 auto;
    /*height: calc(100vh - 389px);*/
    height: 500px;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .left, .right{
    width: 490px;
    background-color: #FFFFFF;
    height: 500px;
  }
  .right{
    margin-left: 0px;
    position: relative;
    padding-top: 60px;
  }

  .user{
    font-size: 16px;
    width: 80%;
    display: block;
    box-sizing: border-box;
    margin: 0 auto;
    margin-bottom: 10px;
  }
  .password{
    font-size: 16px;
  }

  .uni-input{
    border: 1px #e4e4e4 solid;
    padding: 10px;
    height: 46px;
    line-height: 36px;
  }
  button{
    height: 46px;
    line-height: 46px;
  }
  .login-box{
    position: absolute;
    top: 3px;
    right: 3px;
  }
  .ewm-ico, .input-ico{
    cursor: pointer;
  }

</style>
